<template>
    <div>
        <el-dialog
            :title="title()"
            :visible.sync="dialogVisible"
            :before-close="cancelManeuver"
            v-if="dialogVisible"
            width="600px"
            :close-on-click-modal="false"
            append-to-body
        >
            <el-form ref="tManeuverInfo" :model="tManeuverInfo"
                 :rules="rules" :style="{maxHeight:tableHeight+'px',overflow:'auto'}">
                <el-row>
                    <el-col :offset="0" :span="11" class="form-el-col-style">
                        <el-form-item :label="$t('tManeuverInfo.maneuverName')" label-width="110px" prop="maneuverName" ><el-input type="text" v-model="tManeuverInfo.maneuverName"  maxlength= "16" show-word-limit></el-input> </el-form-item>
                    </el-col>
                    <el-col :offset="2" :span="11" class="form-el-col-style">
                        <el-form-item :label="$t('tManeuverInfo.orgId')" label-width="110px" prop="orgId"><el-select v-model="tManeuverInfo.orgId" clearable :style="{ width: '100%' }" ><el-option v-for="(item, index) in orgIdOptions" :key="index" :label="item.attributes.name" :value="item.attributes.code"></el-option></el-select> </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :offset="0" :span="11" class="form-el-col-style">
                        <el-form-item :label="$t('tManeuverInfo.principalId')" label-width="110px" prop="principalId"><el-select v-model="tManeuverInfo.principalId" clearable :style="{ width: '100%' }" ><el-option v-for="(item, index) in principalIdOptions" :key="index" :label="item.attributes.name" :value="item.attributes.code"></el-option></el-select> </el-form-item>
                    </el-col>
                    <el-col :offset="2" :span="11" class="form-el-col-style">
                        <el-form-item :label="$t('tManeuverInfo.assistantId')" label-width="110px" prop="assistantId" ><el-input type="text" v-model="tManeuverInfo.assistantId"  maxlength= "170" show-word-limit></el-input> </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :offset="0" :span="11" class="form-el-col-style">
                        <el-form-item :label="$t('tManeuverInfo.maneuverStatus')" label-width="110px" prop="maneuverStatus" ><el-input type="text" v-model="tManeuverInfo.maneuverStatus"  maxlength= "0" show-word-limit></el-input> </el-form-item>
                    </el-col>
                    <el-col :offset="2" :span="11" class="form-el-col-style">
                        <el-form-item :label="$t('tManeuverInfo.planManeuverTime')" label-width="110px" prop="planManeuverTime"><el-date-picker v-model="tManeuverInfo.planManeuverTime" format="yyyy-MM-dd" value-format="timestamp" :style="{ width: '100%' }" clearable></el-date-picker> </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :offset="0" :span="11" class="form-el-col-style">
                        <el-form-item :label="$t('tManeuverInfo.maneuverReleaseStatus')" label-width="110px" prop="maneuverReleaseStatus" ><el-input type="text" v-model="tManeuverInfo.maneuverReleaseStatus"  maxlength= "85" show-word-limit></el-input> </el-form-item>
                    </el-col>
                    <el-col :offset="2" :span="11" class="form-el-col-style">
                        <el-form-item :label="$t('tManeuverInfo.creatorId')" label-width="110px" prop="creatorId" ><el-input type="text" v-model="tManeuverInfo.creatorId"  maxlength= "10" show-word-limit></el-input> </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :offset="0" :span="11" class="form-el-col-style">
                        <el-form-item :label="$t('tManeuverInfo.createTime')" label-width="110px" prop="createTime"><el-date-picker v-model="tManeuverInfo.createTime" format="yyyy-MM-dd" value-format="timestamp" :style="{ width: '100%' }" clearable></el-date-picker> </el-form-item>
                    </el-col>
                    <el-col :offset="2" :span="11" class="form-el-col-style">
                        <el-form-item :label="$t('tManeuverInfo.updateTime')" label-width="110px" prop="updateTime"><el-date-picker v-model="tManeuverInfo.updateTime" format="yyyy-MM-dd" value-format="timestamp" :style="{ width: '100%' }" clearable></el-date-picker> </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :offset="0" :span="11" class="form-el-col-style">
                        <el-form-item :label="$t('tManeuverInfo.isDeleted')" label-width="110px" prop="isDeleted" ><el-input type="text" v-model="tManeuverInfo.isDeleted"  maxlength= "0" show-word-limit></el-input> </el-form-item>
                    </el-col>
                    <el-col :offset="2" :span="11" class="form-el-col-style">
                        <el-form-item :label="$t('tManeuverInfo.secretCode')" label-width="110px" prop="secretCode" ><el-input type="text" v-model="tManeuverInfo.secretCode"  maxlength= "6" show-word-limit></el-input> </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :offset="0" :span="11" class="form-el-col-style">
                        <el-form-item :label="$t('tManeuverInfo.tenantId')" label-width="110px" prop="tenantId" ><el-input type="text" v-model="tManeuverInfo.tenantId"  maxlength= "85" show-word-limit></el-input> </el-form-item>
                    </el-col>
                    <el-col :offset="2" :span="11" class="form-el-col-style">
                        <el-form-item :label="$t('tManeuverInfo.reviserId')" label-width="110px" prop="reviserId" ><el-input type="text" v-model="tManeuverInfo.reviserId"  maxlength= "85" show-word-limit></el-input> </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelManeuver">{{ $t('base.button.cancel') }}</el-button>
                <el-button type="primary" @click="createManeuver()">{{ $t('base.button.ok') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: 'vDialog',
        components: {},
        data() {
            let i18n = this.$i18n;
            return {
                tableHeight: window.innerHeight - 500,
                    orgIdOptions:[],
                    principalIdOptions:[],
                rules: {


                            orgId :
                            [
                                {
                                    required: true,
                                    message: i18n.t('tManeuverInfo.orgId'),
                                    trigger: 'change'
                                }
                            ] ,


                            principalId :
                            [
                                {
                                    required: true,
                                    message: i18n.t('tManeuverInfo.principalId'),
                                    trigger: 'change'
                                }
                            ] ,


                            maneuverStatus :
                            [
                                {
                                    required: true,
                                    message: i18n.t('tManeuverInfo.maneuverStatus'),
                                    trigger: 'blur'
                                }
                            ] ,
            }
        };
        },
        //父组件传过来的数据属性
        props: {
            dialogVisible: {
                type: Boolean,
                required: true
            },
            tManeuverInfo: {
                required: true
            }
        },
        methods: {
            title() {
                let i18n = this.$i18n;
                if (this.tManeuverInfo.id  == '') {
                    return '演习管理' +i18n.t('base.button.create');
                } else {
                    return '演习管理' +i18n.t('base.button.edit');
                }
            },
            //关闭按钮
            cancelManeuver() {
                this.$emit('dialogClose', this.dialogVisible);
            },
            //保存按钮 新增|| 修改操作
            createManeuver() {
                var _this = this;
                let message = this.$message;
                let i18n = this.$i18n;
                let emit = _this.$emit;
                let refs = _this.$refs
                refs['tManeuverInfo'].validate(valid => {
                    if (!valid) return;
                if (_this.tManeuverInfo.id== '') {
                    _this.axios['maneuver-scenario']
                        .postJson(this.HOST + '/save', JSON.stringify(_this.tManeuverInfo))
                        .then(function (res) {
                            if (res.status == '1') {
                                message({
                                    message: i18n.t('base.operation.success'),
                                    type: 'success'
                                });
                                _this.$emit('dialogSave', _this.dialogVisible);
                            } else {
                            }
                        })
                        .catch(function (err) {
                        });
                } else {
                    _this.axios['maneuver-scenario']
                        .postJson(this.HOST + '/update',
                                JSON.stringify(_this.tManeuverInfo))
                        .then(function (res) {
                            if (res.status == '1') {
                                message({
                                    message: i18n.t('base.operation.success'),
                                    type: 'success'
                                });
                                _this.$emit('dialogSave', _this.dialogVisible);
                            } else {
                            }
                        })
                        .catch(function (err) {
                        });
                }
            });
            }
        },
        mounted(){
            let _this = this;
    }
    };
</script>
<style lang="less" scoped>
    // .el-input-number.is-controls-right .el-input__inner {
    //     text-align: left;
    // }
    // /deep/.el-form-item__label {cloud-opinion-area
    //     word-break: keep-all;
    //     text-overflow: ellipsis;
    //     overflow: hidden;
    // }
    // .form-el-col-style {
    //     padding-left: 10px;
    // }
    // /deep/.el-input .el-input__count .el-input__count-inner {
    //     background: none!important;
    // }
</style>
